<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false"
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="bank_box addr_list" v-for="(item,index) in cardlist" :key="index">
			<view class="qrcode_title">
				{{item.type == 1 ? "微信二维码" : "支付宝二维码"}}
			</view>
			<view class="sc_xg">
				<view class="bank_btn_del" @click="deleteClick(item)">删除</view>
				<view class="bank_btn_edit" @click="detailClick(item)">修改</view>
			</view>
			<view class="sk_qrcode">
				<image :src="item.img" mode=""></image>
			</view>
		</view>
		<view class="retrieve_submit" @click="addClick">
			<button>+ 添加收款码</button>
		</view>
	</view>
</template>

<script>
	import {getPay,detelePay} from '@/api/bonus.js'
	export default{
		data(){
			return{
				navstyle: {
					title: "收款码管理",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left",
				},
				titleStyle: {
					fontWeight: 700
				},
				 cardlist: []
			}
		},
		onShow() {
			this.getPayEvent()
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/bonus/bankcard' // 替换成上一页的路径
				});
							
			},
			getPayEvent(){
				let type=2
				getPay(type).then(response=>{
					console.log(response)
					this.cardlist = response.data;
					
				})
			},
			addClick(){
				uni.navigateTo({
				  url: '/pages/bonus/qrcode_add'
				});
			},
			detailClick(item){
				uni.navigateTo({
				  url: '/pages/bonus/qrcode_add?id='+ item.id
				});
				uni.setStorageSync("qrcode", JSON.stringify(item));
			},
			deleteClick(item){
				detelePay({id:item.id}).then(response=>{
					if(response.code == 1){
						uni.showToast({
							title: response.msg,
							icon: "success",
							duration: 2000
						});
						setTimeout(()=>{
							this.getPayEvent()
						},2000)
					}
				})
			}
		},
	}
</script>

<style>
	.retrieve_submit {
	    padding-bottom: 16px;
	    margin: 32px 32px 16px 32px;
	}
	.retrieve_submit button {
	    background: linear-gradient(#d66c6b, #ed6266);
	    border-radius: 26px;
	    color: #fff;
	}
	.bank_box {
	    box-sizing: border-box;
	    display: flex;
	    flex-direction: column;
	    background: #3d4249;
	    color: #fff;
	    width: 95%;
	    border-radius: 10px;
	    margin: 10px auto;
	    padding: 10px;
	    word-wrap: break-word;
	}
	.qrcode_title{
	    text-align: center;
	    flex-direction: row;
	    justify-content: space-between;
	    margin-bottom: 10px;
	}
	.sc_xg{
	    width: 90%;
	    margin: auto;
	    display: flex;
	    justify-content: space-between;
	    margin-bottom: 10px;
	}
	.bank_box image {
	    display: block;
	    margin: auto auto;
	    width: 213px;
	    height: 213px;
	}
	.bank_btn_del{
	    width: 36%;
	    text-align: center;
	    align-self: flex-end;
	    background: red;
	    color: #fff;
	    padding: 5px 10px;
	    border-radius: 5px;
	    font-size: 14px;
	}
	.bank_btn_edit {
	    width: 36%;
	    text-align: center;
	    align-self: flex-end;
	    background: #5a0;
	    color: #fff;
	    padding: 5px 10px;
	    border-radius: 5px;
	    font-size: 14px;
	}
</style>